<template>
  <div class="msite">
    <!-- 头部 -->
    <HeaderTop title="昌平区北七家宏福科技园(337省道北)">
      <template v-slot:left>
         <span class="header_search">
          <i class="iconfont icon-sousuo"></i>
        </span>
      </template>

      <template v-slot:right>
        <router-link  class="header_login" tag="span" :to="userInfo._id?'/profile':'/login'">
          <span class="header_login_text" v-if="!userInfo._id">登录|注册</span>
          <span class="header_login_text" v-else><i class="iconfont icon-person"></i></span>
        </router-link>
       
      </template>
    </HeaderTop>
    <!-- <div>Msite vue template</div> -->
    <!--首页轮播图导航-->
    <div class="miste-content-wrapper">
      <div class="miste-content">
        <nav class="msite_nav">
          <div class="swiper-container">
            <!-- <div class="swiper-wrapper"> -->
            <!-- 外层包裹标签 -->
            <swiper
              ref="mySwiper"
              :options="swiperOptions"
              class="swiper-wrapper"
            >
              <!-- 第一排 -->
              <swiper-slide class="swiper-slide" v-for="(item,index) in getCategoryList" :key="index">
                <!-- <div class="swiper-slide"> -->
                <a href="singleItem.link" class="link_to_food" v-for="(singleItem,index) in item " :key="index">
                  <div class="food_container">
                    <img :src="imgBaseUrl+singleItem.image_url" >
                  </div>
                  <span>{{singleItem.title}}</span>
                </a>
              </swiper-slide>
              <!-- </div> -->
              <!-- 第二排 -->
            </swiper>
            <!-- </div> -->
            <!-- Add Pagination -->
            <!-- <div class="swiper-pagination"></div> -->
            <div class="swiper-pagination"></div>
          </div>
        </nav>
        <div class="msite_shop_list">
          <div class="shop_header">
            <i class="iconfont icon-xuanxiang"></i>
            <span class="shop_header_title">附近商家</span>
          </div>
          <ShopList :shops='shops'></ShopList>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Vue from "vue";
import VueAwesomeSwiper from "vue-awesome-swiper";

// import style (>= Swiper 6.x)
import "swiper/swiper-bundle.css";

Vue.use(VueAwesomeSwiper /* { default options with global component } */);

import HeaderTop from "../../components/HeaderTop/HeaderTop";
import ShopList from "../../components/ShopList/ShopList";
// import { reqCategorys, reqShops } from "../../api/index";


//第一步  mapState  mapGetters  写在computed里面

// mapActions  mapMutations  写在methods里面
import {mapState,mapActions} from 'vuex'
export default {
  data() {
    return {
      swiperOptions: {
        // pagination: {
        //   el: '.swiper-pagination'
        // },
        // Some Swiper option/callback...
      },
       imgBaseUrl: 'https://fuss10.elemecdn.com'
    };
  },
  computed: {
    // 映射state的数据
    ...mapState(['categorys','shops','address','userInfo']),

 // 请求数据
    getCategoryList() {
      let bigArr = this.categorys;
      let arr = [];
      let containerArr = [];
      bigArr.forEach((item, index) => {
        if (arr.length == 0) {
          containerArr.push(arr);
        }
        arr.push(item);
        if (arr.length == 8) {
          arr = [];
        }
      });
      console.log(containerArr);
      return containerArr;
    },

    swiper() {
      return this.$refs.mySwiper.$swiper;
    },
  },

  components: {
    HeaderTop,
    ShopList,
  },

  methods: {
    // 映射Actions数据
    ...mapActions(['getCategroys','getAddress','getShops'])
   
  },

  async mounted() {
    console.log("Current Swiper instance object", this.swiper);
    this.swiper.slideTo(3, 1000, false);


    // 执行映射过来的方法
    this.getCategroys()
    this.getAddress()
    this.getShops()
  
   
    // reqCategorys().then((res) => {
    //   let max =8 ;
    //   let bigArr = res.data;
    //   let arr = [];
    //   let containerArr = [];
    //   bigArr.forEach((item, index) => {
    //     if (arr.length == 0) {
    //       containerArr.push(arr);
    //     }
    //     arr.push(item);
    //     if (arr.length == max) {
    //       arr = [];
    //     }
    //   });
    //      console.log(containerArr);
    //      this.bannerList=containerArr
    // });
    // let result=await reqCategorys();
    // let containerArr=this.getCategory(result,8)
    // this.bannerList=containerArr

    // 请求数据
    // 触发dispatch方法  actions 间接去更改state数据
    // this.$store.dispatch('getAddress')
    // this.$store.dispatch('getCategroys')
    // this.$store.dispatch('getShops')
  },
};
</script>

<style lang="stylus" rel="stylesheet/stylus">
@import '../../common/mixins';

.msite { // 首页
  width: 100%;

  .miste-content-wrapper {
    position: absolute;
    top: 45px;
    bottom: 46px;
    width: 100%;

    .msite_nav {
      bottom-border-1px(#e4e4e4);
      margin-top: 15px;
      height: 200px;
      background: #fff;

      .swiper-container {
        width: 100%;
        height: 100%;

        .swiper-wrapper {
          width: 100%;
          height: 100%;

          .swiper-slide {
            display: flex;
            justify-content: center;
            align-items: flex-start;
            flex-wrap: wrap;

            .link_to_food {
              width: 25%;

              .food_container {
                display: block;
                width: 100%;
                text-align: center;
                padding-bottom: 10px;
                font-size: 0;

                img {
                  display: inline-block;
                  width: 50px;
                  height: 50px;
                }
              }

              span {
                display: block;
                width: 100%;
                text-align: center;
                font-size: 13px;
                color: #666;
              }
            }
          }
        }

        .swiper-pagination {
          >span.swiper-pagination-bullet-active {
            background: #02a774;
          }
        }
      }
    }

    .msite_shop_list {
      top-border-1px(#e4e4e4);
      margin-top: 10px;
      background: #fff;

      .shop_header {
        padding: 10px 10px 0;

        .shop_icon {
          margin-left: 5px;
          color: #999;
        }

        .shop_header_title {
          color: #999;
          font-size: 14px;
          line-height: 20px;
        }
      }
    }
  }
}
</style>